import type { PropsWithChildren, FC } from "react";
import { SearchOutlined } from "@ant-design/icons";
import { Input } from "antd";
import "./style.css";
import { debounce } from "@/util/index";
interface TopSearchProps {
  value: string;
  setvalue: (value: string) => void;
  searchFunc?: (data: string) => void;
  className?: string;
}
const TopSearch: FC<PropsWithChildren<TopSearchProps>> = props => {
  const style = " w-full pt-3 pb-2 h-12 px-1 bg-white cursor-auto ";
  function handelOnChange(e: any) {
    props.setvalue(e?.target?.value);
    const throttlefunc = debounce(props.searchFunc as () => void);
    throttlefunc(e?.target?.value);
  }
  return (
    <>
      <div className={style + props.className}>
        <div className=" flex justify-between items-center ">
          <Input
            value={props.value}
            onChange={handelOnChange}
            placeholder="搜索"
            size="small"
            variant="filled"
            allowClear={false}
            prefix={<SearchOutlined />}
          />
          {props.children ? (
            <div className="ml-2 w-8 rounded-lg bg-black/10 hover:bg-black/20">
              {props.children}
            </div>
          ) : (
            ""
          )}
        </div>
      </div>
    </>
  );
};

export default TopSearch;
